<cnsl-create-layout
  title="{{
    id ? ('SMTP.DETAIL.TITLE' | translate) : ('SMTP.CREATE.STEPS.TITLE' | translate: { value: providerDefaultSetting.name })
  }}"
  [createSteps]="4"
  [currentCreateStep]="currentCreateStep"
  (closed)="close()"
>
  <div class="wizard-header">
    <img
      class="smtp-logo"
      src="{{ providerDefaultSetting.image }}"
      alt="{{ providerDefaultSetting.name }}"
      *ngIf="providerDefaultSetting.name !== 'generic'"
    />
    <div class="smtp-icon" *ngIf="providerDefaultSetting.name === 'generic'">
      <mat-icon class="icon" svgIcon="mdi_smtp" alt="providerDefaultSetting.name" />
    </div>
    <h2>
      {{
        !id
          ? ('SMTP.CREATE.STEPS.CREATE_DESC_TITLE' | translate: { value: providerDefaultSetting.name | titlecase })
          : ('SMTP.CREATE.STEPS.CURRENT_DESC_TITLE' | translate)
      }}
    </h2>
  </div>
  <mat-progress-bar class="progress-bar" color="primary" *ngIf="smtpLoading" mode="indeterminate"></mat-progress-bar>

  <mat-horizontal-stepper
    class="stepper {{ 'last-edited-step-' + stepper.selectedIndex }}"
    linear
    #stepper
    labelPosition="bottom"
    (selectionChange)="changeStep($event)"
  >
    <mat-step [editable]="true">
      <ng-template matStepLabel>{{ 'SMTP.CREATE.STEPS.PROVIDER_SETTINGS' | translate }}</ng-template>
      <form [formGroup]="firstFormGroup" autocomplete="off">
        <mat-checkbox class="smtp-checkbox" formControlName="tls" (change)="toggleTLS($event)" data-e2e="tls-checkbox">
          {{ 'SETTING.SMTP.TLS' | translate }}
        </mat-checkbox>

        <cnsl-form-field class="smtp-form-field" *ngIf="providerDefaultSetting.regions">
          <cnsl-label>{{ providerDefaultSetting.multiHostsLabel }}</cnsl-label>
          <mat-select formControlName="region">
            <mat-option *ngFor="let region of providerDefaultSetting.regions | keyvalue" [value]="region.value">
              {{ region.key }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="smtp-form-field" label="Description">
          <cnsl-label>{{ 'SETTING.SMTP.DESCRIPTION' | translate }}</cnsl-label>
          <input cnslInput name="description" formControlName="description" placeholder="description" />
        </cnsl-form-field>

        <cnsl-form-field class="smtp-form-field" label="Host And Port">
          <cnsl-label>{{ 'SETTING.SMTP.HOSTANDPORT' | translate }}</cnsl-label>
          <input cnslInput name="hostAndPort" formControlName="hostAndPort" placeholder="host:port" required />
        </cnsl-form-field>

        <cnsl-form-field class="smtp-form-field" label="User">
          <cnsl-label>{{ 'SETTING.SMTP.USER' | translate }}</cnsl-label>
          <input
            id="smtp-user"
            cnslInput
            name="smtp-user"
            autocomplete="smtp-user"
            formControlName="user"
            placeholder="{{ providerDefaultSetting.user.placeholder }}"
            required
          />
        </cnsl-form-field>

        <cnsl-form-field class="smtp-form-field" label="Password">
          <cnsl-label>{{ 'SETTING.SMTP.PASSWORD' | translate }}</cnsl-label>
          <input
            id="smtp-password"
            cnslInput
            name="smtp-password"
            autocomplete="off webauthn"
            formControlName="password"
            placeholder="{{ hasSMTPConfig ? '****************' : providerDefaultSetting.password.placeholder }}"
            type="password"
            required="{{ !hasSMTPConfig }}"
          />
        </cnsl-form-field>
      </form>

      <div class="smtp-create-actions">
        <button
          mat-raised-button
          [disabled]="firstFormGroup.invalid"
          color="primary"
          matStepperNext
          data-e2e="continue-to-2nd-form"
        >
          {{ 'ACTIONS.CONTINUE' | translate }}
        </button>
      </div>
    </mat-step>

    <mat-step [editable]="true">
      <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>{{ 'SMTP.CREATE.STEPS.SENDER_SETTINGS' | translate }}</ng-template>

        <cnsl-form-field class="smtp-form-field" label="Sender Address">
          <cnsl-label>{{ 'SETTING.SMTP.SENDERADDRESS' | translate }}</cnsl-label>
          <input
            cnslInput
            name="senderAddress"
            formControlName="senderAddress"
            placeholder="{{ senderEmailPlaceholder }}"
            required
          />
        </cnsl-form-field>

        <cnsl-form-field class="smtp-form-field" label="Sender Name">
          <cnsl-label>{{ 'SETTING.SMTP.SENDERNAME' | translate }}</cnsl-label>
          <input cnslInput name="senderName" formControlName="senderName" placeholder="Zitadel" required />
        </cnsl-form-field>

        <cnsl-form-field class="smtp-form-field" label="Reply-To Address">
          <cnsl-label>{{ 'SETTING.SMTP.REPLYTOADDRESS' | translate }}</cnsl-label>
          <input cnslInput name="senderReplyToAddress" formControlName="replyToAddress" placeholder="replyto@example.com" />
        </cnsl-form-field>
      </form>

      <div class="smtp-create-actions">
        <button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
        <button
          mat-raised-button
          [disabled]="secondFormGroup.invalid"
          color="primary"
          matStepperNext
          data-e2e="continue-button"
        >
          {{ 'ACTIONS.CONTINUE' | translate }}
        </button>
      </div>
    </mat-step>

    <mat-step [editable]="true">
      <form>
        <ng-template matStepLabel>{{ 'SMTP.CREATE.STEPS.SAVE_SETTINGS' | translate }}</ng-template>
        <cnsl-info-section>
          <div class="title-row">
            <div class="left">
              <h2 class="title">{{ 'SMTP.CREATE.STEPS.TEST.TITLE' | translate }}</h2>
            </div>
            <div class="right">
              <button color="primary" mat-raised-button class="continue-button" (click)="testEmailConfiguration()">
                {{ 'ACTIONS.TEST' | translate }}
              </button>
            </div>
          </div>
          <p class="cnsl-secondary-text description">{{ 'SMTP.CREATE.STEPS.TEST.DESCRIPTION' | translate }}</p>
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'SMTP.LIST.DIALOG.TEST_EMAIL' | translate }}</cnsl-label>
            <input
              cnslInput
              [(ngModel)]="email"
              [ngModelOptions]="{ standalone: true }"
              data-e2e="email-test-dialog-input"
            />
          </cnsl-form-field>

          <div class="is-loading" *ngIf="isLoading()">
            <mat-spinner diameter="50"></mat-spinner>
          </div>

          <cnsl-form-field class="formfield" *ngIf="testResult">
            <cnsl-label>{{ 'SMTP.LIST.DIALOG.TEST_RESULT' | translate }}</cnsl-label>
            <textarea
              cnslInput
              class="{{ resultClass }}"
              [(ngModel)]="testResult"
              [ngModelOptions]="{ standalone: true }"
            ></textarea>
          </cnsl-form-field>
        </cnsl-info-section>

        <div class="smtp-create-actions">
          <button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
          <button
            mat-raised-button
            class="create-button"
            color="primary"
            data-e2e="create-button"
            (click)="savePolicy(stepper)"
            [disabled]="
              firstFormGroup.invalid || secondFormGroup.invalid || (['iam.policy.write'] | hasRole | async) === false
            "
          >
            {{ !hasSMTPConfig ? ('ACTIONS.CREATE' | translate) : ('ACTIONS.SAVE' | translate) }}
          </button>
        </div>
      </form>
    </mat-step>

    <mat-step [editable]="true">
      <form>
        <ng-template matStepLabel>{{ 'SMTP.CREATE.STEPS.NEXT_STEPS' | translate }}</ng-template>
        <cnsl-info-section *ngIf="!isActive">
          <div class="title-row">
            <div class="left">
              <h2 class="title">{{ 'SMTP.CREATE.STEPS.ACTIVATE.TITLE' | translate }}</h2>
              <div>
                <a
                  mat-icon-button
                  card-actions
                  mat-icon-button
                  href="https://zitadel.com/docs/guides/manage/console/default-settings#smtp"
                  rel="noreferrer"
                  target="_blank"
                >
                  <mat-icon class="next-icon">info_outline</mat-icon>
                </a>
              </div>
            </div>
            <div class="right">
              <button
                color="primary"
                mat-raised-button
                class="continue-button"
                data-e2e="activate-button"
                (click)="activateSMTPConfig(); $event.stopPropagation()"
              >
                {{ 'ACTIONS.ACTIVATE' | translate }}
              </button>
            </div>
          </div>
          <p class="cnsl-secondary-text description">{{ 'SMTP.CREATE.STEPS.ACTIVATE.DESCRIPTION' | translate }}</p>
        </cnsl-info-section>

        <cnsl-info-section *ngIf="isActive">
          <div class="title-row">
            <div class="left">
              <h2 class="title">{{ 'SMTP.CREATE.STEPS.DEACTIVATE.TITLE' | translate }}</h2>
              <div>
                <a
                  mat-icon-button
                  card-actions
                  mat-icon-button
                  href="https://zitadel.com/docs/guides/manage/console/default-settings#smtp"
                  rel="noreferrer"
                  target="_blank"
                >
                  <mat-icon class="next-icon">info_outline</mat-icon>
                </a>
              </div>
            </div>
            <div class="right">
              <button
                color="primary"
                mat-raised-button
                class="continue-button"
                data-e2e="deactivate-button"
                (click)="deactivateSMTPConfig(); $event.stopPropagation()"
              >
                {{ 'ACTIONS.DEACTIVATE' | translate }}
              </button>
            </div>
          </div>
          <p class="cnsl-secondary-text description">{{ 'SMTP.CREATE.STEPS.DEACTIVATE.DESCRIPTION' | translate }}</p>
        </cnsl-info-section>

        <div class="smtp-create-actions">
          <button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
          <button mat-raised-button class="create-button" color="primary" data-e2e="close-button" (click)="close()">
            {{ 'ACTIONS.CLOSE' | translate }}
          </button>
        </div>
      </form>
    </mat-step>

    <ng-template matStepperIcon="edit">
      <mat-icon>check</mat-icon>
    </ng-template>
  </mat-horizontal-stepper>
</cnsl-create-layout>
